<template>
  <div class="childAccount">
    <ContentBox title="子账户管理" @left="back" @right="add" :fixed="true">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
      <template slot="oright">添加</template>
    </ContentBox>
    <notice class="not"></notice>
    <div>
      <van-cell v-for="(item, index) in listdata" :key="index" center :title="item.nickname" :label="item.phone">
        <template slot="default"><div class="unbind" @click="unbind(item.uid)">解除绑定</div></template>
      </van-cell>
    </div>
    <van-dialog v-model="show" title="绑定子账号" show-cancel-button @confirm="bind">
      <van-field v-model="phone" label="手机号" placeholder="请输入带绑定子账号的手机号"/>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      listdata: '',
      show: false,
      phone: ''
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    add () {
      this.phone = ''
      this.show = true
    },
    getData () {
      this.$axios.get('/api/merchant/operate_list').then(res => {
        if (res.status === 200) {
          this.listdata = res.data
        }
      })
    },
    bind () {
      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
        this.$dialog({ message: '手机号格式不正确' })
        return false
      }
      this.$axios.post('/api/merchant/invite_operate', {
        phone: this.phone
      }).then(res => {
        if (res.status === 200) {
          this.$toast('添加成功')
          this.getData()
        } else {
          this.$toast(res.msg)
        }
      })
    },
    unbind (id) {
      this.$dialog.confirm({
        title: '提示',
        message: '是否解除该子账号'
      }).then(() => {
        this.$axios.post(`/api/merchant/unbind_operate`, {
          uid: id
        }).then(res => {
          if (res.status === 200) {
            this.$toast('解除成功')
            this.getData()
          } else {
            this.$toast(res.msg)
          }
        })
      }).catch(() => {
        // on cancel
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="scss">
.childAccount{
  height: 100%;
  width: 100%;
  background: #f6f6f6;
  padding-top: 1.32rem;
  .not{
    position: fixed;
    top: .88rem;
    left: 0;
  }
  .unbind{
    color: #FF2A1F;
  }
}
</style>
